<template>
  <div class="order-search-and-list-container">
    <!-- 搜索表单 -->
    <div class="search-form-wrapper">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <!-- 订单编号输入框 -->
        <el-form-item label="服务人员姓名">
          <el-input v-model="form.name" placeholder="请输入服务人员姓名" clearable class="input-style" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.phone" placeholder="请输入手机号" clearable class="input-style" />
        </el-form-item>
        <!-- 重置和查询按钮 -->
        <el-form-item>
          <el-button type="default" @click="resetForm" class="reset-button">重置</el-button>
          <el-button type="primary" @click="findList" class="search-button">查询</el-button>
        </el-form-item>
      </el-form>
      <hr/>
      <el-button type="primary" @click="saveData()" class="search-button">新建</el-button>
    </div>
    <!-- 订单列表展示 -->
    <div class="order-list-wrapper">
      <el-table :data="tableData" style="width: 100%" class="order-table">
        <!-- 序号 -->
        <el-table-column align="center" prop="id" label="序号" width="170px" />
        <!-- 服务人员姓名 -->
        <el-table-column align="center" prop="name" label="服务人员姓名" />
        <!-- 服务人员手机 -->
        <el-table-column align="center" prop="phone" label="服务人员手机" width="110px" />
        <!-- 身份证号 -->
        <el-table-column align="center" prop="idCardNo" label="身份证号" width="250px" />
        <!-- 证明资料 -->
        <el-table-column align="center" prop="image" label="证明资料" width="120px" >
          <template #default="scope">
            <div style="width: 100px;height: 100px">
              <img :src="scope.row.image" alt="证明" style="width: 100%;height:100%">
            </div>
          </template>
        </el-table-column>
        <!-- 创建时间 -->
        <el-table-column align="center" prop="createTime" label="创建时间" width="250px" />
        <!-- 操作列 -->
        <el-table-column align="center" prop="" label="操作" width="250px">
          <template #default="scope">
            <el-button link type="primary" @click="updateData(scope.row)">编辑</el-button>
            <el-button link type="danger" @click="isDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="form.pageNum"
        v-model:page-size="form.pageSize"
        :page-sizes="[1, 20, 30, 40]"
        :size="paginationSize"
        :disabled="paginationDisabled"
        :background="paginationBackground"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
      />
    </div>
<!--    修改、添加弹窗-->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTips"
      width="500"
      :before-close="handleClose"
    >
      <el-form :model="formData" label-width="auto" style="max-width: 600px">
        <el-form-item label="订单编号" v-if="formData.id!=null">
          <el-input v-model="formData.id" disabled />
        </el-form-item>
        <el-form-item label="服务人员姓名：">
          <el-input v-model="formData.name" placeholder="请输入服务人员姓名" clearable/>
        </el-form-item>
        <el-form-item label="服务人员手机：">
          <el-input v-model="formData.phone" placeholder="请输入服务人员手机" clearable/>
        </el-form-item>
        <el-form-item label="身份证号：">
          <el-input v-model="formData.idCardNo" placeholder="请输入身份证号" clearable/>
        </el-form-item>
        <el-form-item label="证明资料：">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:9999/instOrder-orderService/minio/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="formData.image" :src="formData.image" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="formDataSbt()">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {findAll, removeById, saveUpdateData} from "@/api/ServiceStaffManagement";
import {ElMessage} from "element-plus";
import { Plus } from '@element-plus/icons-vue'

// 订单列表数据
const tableData = ref([]);
// 搜索表单数据
const form = ref({
  pageNum: 1,
  pageSize: 2,
  name: null,
  phone: null,
});
// 总
const total = ref(0);
// 分页相关配置
const paginationSize = ref('');
const paginationDisabled = ref(false);
const paginationBackground = ref(true);

const findList = () => {
  findAll(form.value).then((res) => {
    tableData.value = res.data.data.records;
    console.log(res.data);
    total.value = res.data.data.total;
  });
};
// 初始化查询订单列表数据
findList();

// 处理分页每页数量变化
const handlePageSizeChange = (newPageSize) => {
  form.value.pageSize = newPageSize;
  findList();
};

// 处理分页当前页变化
const handlePageCurrentChange = (newPageNum) => {
  form.value.pageNum = newPageNum;
  findList();
};

// 重置搜索表单
const resetForm = () => {
  form.value.pageNum = 1;
  form.value.pageSize = 10;
  form.value.name = '';
  form.value.phone = '';
  findList();
};
const isDelete = (id) => {
  console.log(id);
  if (confirm("是否删除？？")){
    removeById(id).then((res) => {
      console.log(res)
      if (res.data.code === 200){
        findList();
        ElMessage.success("删除成功");
      }else if (res.data.code === 300){
        ElMessage.info("该服务人员有订单，不能删除");
      }else {
        ElMessage.error("删除失败");
      }
    })
  }
};
const dialogVisible = ref(false);
const dialogTips = ref('');
const formData = ref({});
// 添加
const saveData = () => {
  formData.value = {};
  dialogVisible.value = true;
  dialogTips.value = '添加服务人员';
};
// 修改
const updateData = (row) => {
  formData.value = row;
  dialogVisible.value = true;
  dialogTips.value = '修改服务人员';
  console.log(formData.value)
};

const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  console.log(uploadFile.raw)
  // console.log("----------------")
  // console.log(response.errorMessage)
  formData.value.image=response.errorMessage
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('请转上传image或者jpeg图片')
    return false
  } else if (rawFile.size / 5120 / 5120 > 2) {
    ElMessage.error('该图片不能大于5MB!')
    return false
  }
  return true
}
const formDataSbt = () => {
  console.log(formData.value)
  saveUpdateData(formData.value).then((res) => {
    dialogVisible.value = false;
    findList();
    ElMessage.success("成功")
  });
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style scoped>
/* 整体容器样式 */
.order-search-and-list-container {
  padding: 20px;
  background-color: #f9f9f9;
}

/* 搜索表单样式 */
.search-form-wrapper {
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

/* 输入框样式 */
.input-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
}

/* 下拉选择框样式 */
.select-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 重置按钮样式 */
.reset-button {
  margin-right: 10px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #333;
  padding: 0 15px;
}

/* 查询按钮样式 */
.search-button {
  height: 32px;
  line-height: 32px;
  border: 1px solid #0a9fe5;
  border-radius: 4px;
  background-color: #0a9fe5;
  color: white;
  padding: 0 15px;
}

/* 订单表格样式 */
.order-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.order-table th,
.order-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: center;
}

.order-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 自定义订单状态按钮样式 */
.custom-order-status-button {
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 4px;
}

/* 分页样式 */
.pagination-style {
  margin-top: 10px;
  text-align: right;
}

.pagination-style.el-pagination {
  display: inline-block;
}
</style>
